<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <video ref="videoRef"
               style="display: none"
               muted
               autoplay
               loop
               crossorigin
               controls>
          <source src="../../../../assets/img/file/cs.mp4"
                  type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  createVideoPlaneGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import AceEditor from "@/components/aceEditor.vue";
const videoRef=ref(null)

const htmlStr = ref(`
   <template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <video ref="videoRef"
               style="display: none"
               muted
               autoplay
               loop
               crossorigin
               controls>
          <source src="../../../../assets/img/file/cs.mp4"
                  type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  createVideoPlaneGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";

const videoRef=ref(null)

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000);
  //垂直
  createVideoPlaneGraphics(cViewer.value, {
    position: {"lon": 113.59, "lat": 34.74, "height": 200},
    videoElement: videoRef.value,
    width: 400,
    height: 200,
    normal:'v'
  })
  //水平
  createVideoPlaneGraphics(cViewer.value, {
    position: {"lon": 113.593, "lat": 34.74, "height": 200},
    videoElement: videoRef.value,
    width: 400,
    height: 200,
    normal:'h'
  })
  videoRef.value.play();
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>

`);

const tsStr = ref(`
import * as Cesium from "cesium";
/**
 * 视频投放
 * @function
 * @param {object} options
 * @param {Cartesian3} options.position - 坐标数组
 * @param {Cartesian2} options.height - 高
 * @param {Cartesian2} options.width - 宽
 * @param {HTMLElement} options.videoElement - video绑定dom
 * @param {Cartesian3} options.normal - 垂直方向 可选  UNIT_Z 水平  UNIT_X或者 UNIT_Y 垂直
 */
const createVideoPlaneGraphics=(viewer:any,options:any)=> {
    let { position, normal,height,width} = options;
    if(normal==="v"){
        normal=Cesium.Cartesian3.UNIT_X;
    }else if(normal==="h"){
        normal=Cesium.Cartesian3.UNIT_Z;
    }else{
        normal=Cesium.Cartesian3.UNIT_Y;
    }
    if(!position){ return; }
        let entity:any = new Cesium.Entity();
        entity.position = Cesium.Cartesian3.fromDegrees(position['lon'],position['lat'],position['height']);
        entity.plane = {
            plane: new Cesium.Plane(normal , 0.0),
            dimensions:  new Cesium.Cartesian2(width || 200, height||150.0),
            material: new Cesium.ImageMaterialProperty({
                image: options.videoElement,
            }),
        };
        return viewer.entities.add(entity);
}
export {
  createVideoPlaneGraphics
}
`);

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError:1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value,[113.59, 34.74],3000);
  //垂直
  createVideoPlaneGraphics(cViewer.value, {
    position: {"lon": 113.59, "lat": 34.74, "height": 200},
    videoElement: videoRef.value,
    width: 400,
    height: 200,
    normal:'v'
  })
  //水平
  createVideoPlaneGraphics(cViewer.value, {
    position: {"lon": 113.593, "lat": 34.74, "height": 200},
    videoElement: videoRef.value,
    width: 400,
    height: 200,
    normal:'h'
  })
  videoRef.value.play();
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(()=>{
    renderStart();
  })
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
